﻿@{
    
    Layout = null;
}

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#shopName").combobox({
                url: '/SupportNumShelf/GetShop',              
                valueField: "shopID",
                textField: "shopName"
            });
        })

    </script>
<script>



    function searchData() {

        var start = $("#txtDate1").datebox('getValue');
        var end = $("#txtDate2").datebox('getValue');
        //alert(start); 
        //if (start == null || end == null || end == "" || end == "") {

        //    alert("开始日期和结束时间不能为空");
        //    txtDate1.focus();
        //    return false;
        //}
         if (txtDate1.value > txtDate2.value) {

            alert("开始日期不能大于截至日期！");
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空

            txtDate1.focus();
            txtDate2.focus();
            return false;
        }
        else {
            $.post("/OrderByTimeEchart/GetOrderAll?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val() + '&storeid=' + $("#shopName").combobox('getValue'),
            function (result) {
                var dataArray = [];
                var date = [];
                var SaleMoney = [];


                //请求成功时执行该函数内容，result即        为服务器返回的json对象   
                $.each(result, function (index, item) {

                    //挨个取出类别并填入类别数 
                    dataArray.push({
                        name: item.Date,
                        value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                    });
                    date.push(item.Date);
                    SaleMoney.push(item.CountMoney);

                });
                //date = date.reverse();
                //SaleMoney = SaleMoney.reverse();
                // 基于准备好的dom，初始化echarts实例  
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据  
                var option = {
                    title: {
                        text: '今日营业额分析',
                        subtext: '按时间节点统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: date// ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            smooth: true,
                            itemStyle: { normal: { areaStyle: { type: 'default' } } },
                            data: SaleMoney// [10, 12, 21, 54, 260, 830, 710]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。  
                myChart.setOption(option);
            }
              )
        }
    }
    </script>


<script type="text/javascript">
    function ww3(date){  
        var y = date.getFullYear();  
        var m = date.getMonth()+1;  
        var d = date.getDate();  
        var h = date.getHours();  
        var str = y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+' '+(h<10?('0'+h):h);   //这里返回的是小时
        return str;  
    }  
</script>

<body>
        <div id="tool" style="padding-left: 90px; margin-top: 40px">
        <span style="font-size: larger; color: brown; margin-top: initial;">请选择日期进行查询:</span>
        <input id="txtDate1" type="text" class="easyui-datebox"  />
       ---
        <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp
            选择店铺：  <input id="shopName" class="easyui-combobox" name="shopName"  />
                        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
             &nbsp&nbsp&nbsp 
        <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        <span style="font-size: larger; color: red">&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>


@*            <span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">
　　<input type="text" id="datetime1" data-options="formatter:ww3" class="easyui-datetimebox">
                ---　<input type="text" id="datetime2" data-options="formatter:ww3" class="easyui-datetimebox">
</span>*@
    </div>

    <div id="main" style="width: 900px; height: 500px;margin-left: 80px; margin-top: 20px; float: left"></div>
    <script type="text/javascript">
        $.post('/OrderByTimeEchart/GetOrderAll',
             function (result) {
                 var dataArray = [];
                 var date = [];
                 var SaleMoney = [];


                 //请求成功时执行该函数内容，result即        为服务器返回的json对象   
                 $.each(result, function (index, item) {

                     //挨个取出类别并填入类别数 
                     dataArray.push({
                         name: item.Date,
                         value: item.CountMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                     });
                     date.push(item.Date);
                     SaleMoney.push(item.CountMoney);

                 });
                 //date = date.reverse();
                 //SaleMoney = SaleMoney.reverse();


                 // 基于准备好的dom，初始化echarts实例  
                 var myChart = echarts.init(document.getElementById('main'));

                 // 指定图表的配置项和数据  
                 var option = {
                     title: {
                         text: '今日营业额分析',
                         subtext: '按时间节点统计'
                     },
                     tooltip: {
                         trigger: 'axis'
                     },
                     //legend: {
                     //    data: ['意向', '预购', '成交']
                     //},
                     toolbox: {
                         show: true,
                         feature: {
                             mark: { show: true },
                             dataView: { show: true, readOnly: false },
                             magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                             restore: { show: true },
                             saveAsImage: { show: true }
                         }
                     },
                     calculable: true,
                     xAxis: [
                         {
                             type: 'category',
                             boundaryGap: false,
                             data: date    // ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                         }
                     ],
                     yAxis: [
                         {
                             type: 'value'
                         }
                     ],
                     series: [
                         {
                             name: '成交',
                             type: 'line',
                             smooth: true,
                             itemStyle: { normal: { areaStyle: { type: 'default' } } },
                             data:SaleMoney// [10, 12, 21, 54, 260, 830, 710]
                         }
                     ]
                 };

                 // 使用刚指定的配置项和数据显示图表。  
                 myChart.setOption(option);
             }
          )
    </script>
</body>

